<!DOCTYPE html>
<html>
    <head>
        <title>表格组件</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../highlight/shCore.js">
        </script>
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
    </head>
    <body>
        <div class="wrapper">
            <h2>simplegrid</h2>
            <fieldset>
                <legend>表格组件</legend>
                用于各种大数据的展示，但最好存在滚动条，方便让它不会卡死页面。鉴于simplegrid是动态模板实现，在大数据量的情况下容易卡，性能不佳，故推荐使用通过静态模板实现的smartgrid
            </fieldset>
            <fieldset>
                <legend>使用说明</legend>
                <p>有三个重要的数据项，一个是<b style="color:orangered">columns</b>, 用于配置表头的每一列的具体规格，
                    一个是<b style="color:orangered">data</b>，用于配置tbody里的每一行的内容，
                    一个是<b style="color:orangered">pager</b>，用于配置分页栏
                </p>

                <table class="table-doc">
                    <col width="180"/>
                    <col width="180"/>
                    <tr>
                        <th>名字</th><th>默认值</th> <th>说明</th>
                    </tr>
                    <tr>
                        <td colspan="3">columns对象数组里面的各个对象的匹置项</td>
                    </tr>
                    <tr>
                        <td>field</td><td></td> <td>列的ID名，方便与tbody中的数据相对应</td>
                    </tr>
                    <tr>  
                        <td>text</td><td></td> <td>列的输出文本</td> 
                    </tr>
                    <tr>   
                        <td>width</td><td></td> <td>列宽</td> 
                    </tr>
                    <tr>   
                        <td>align</td> <td>"left"</td><td>对齐方式, left, right, center</td> 
                    </tr>
                    <tr>   
                        <td>hidden</td> <td>false</td><td>是否隐藏列</td> 
                    </tr>
                    <tr>   
                        <td>resizable</td> <td>true</td> <td>是否允许改变列宽</td>  
                    </tr>
                    <tr>   
                        <td>sortable</td> <td>true</td> <td>是否允许排序 </td> 
                    </tr>
                    <tr>   
                        <td>title</td> <td></td> <td>通过getColumnTitle获得 </td> 
                    </tr>
                    <tr>   
                        <td>className</td><td></td>  <td>类名 </td> 
                    </tr>
                    <tr>   
                        <td colspan="3" align="center">与columns并列的属性或方法 </td> 
                    </tr>

                    <tr>
                        <td>pageable</td> <td>false </td>  <td> 是否显示分页栏</td> 
                    </tr>
                    <tr>
                        <td>pager</td> <td>{} </td>  <td> 用于配置分页栏</td> 
                    </tr>
                    <tr>
                        <td>showRows</td> <td> 0 </td>  <td> 每页真实要显示的行数</td> 
                    </tr>
                    <tr>
                        <td>currentPage</td> <td> 1 </td>  <td> 当前位于第几页</td> 
                    </tr>
                    <tr>
                        <td>edge</td> <td> 15 </td>  <td>如果某一列可以允许<b>通过拖动改变列宽</b>,当用户在表头对应的单元格移动鼠标时,<br/>
                            它离单元格的右边多少像素时就改变光标的形态,表示可以拖动</td> 
                    </tr>
                    <tr>
                        <td>columnWidth</td> <td> 160 </td>  <td>每列默认的宽度</td> 
                    </tr>
                    <tr>
                        <td>tbodyHeight</td> <td> 35 </td>  <td>框架根据 tbodyRowHeight * showRows求出 </td> 
                    </tr>
                    <tr>
                        <td>theadHeight</td> <td> 35 </td>  <td>这个最好与thead的单元格一样或差一两像素 </td> 
                    </tr>
                    <tr>
                        <td>theadTemplate(template)</td> <td>函数或默认模板  </td>  <td>表头那一行的HTML模板 </td> 
                    </tr>
                    <tr>
                        <td>tbodyTemplate(template)</td> <td>函数或默认模板</td>  <td>表身每一行的HTML模板 </td> 
                    </tr>
                    <tr>
                        <td>getTemplate(template, options)</td> <td>函数</td>  <td>用于修改整个模板 </td> 
                    </tr>
                    <tr>
                        <td>getColumn(el, options)</td> <td>函数</td>  <td>用于为每一列的数据添加更多自定义属性, el为columns中的某一个对象 </td> 
                    </tr>
                    <tr>
                        <td>addColumn(option, index)</td> <td>函数</td>  <td>在第index列插入新的列,option为一个对象，参见columns的配置 </td> 
                    </tr>
                    <tr>
                        <td>columnsOrder</td> <td>[]</td>  <td>里面为columns中每个field的名字,用于调整每一列出现的顺序 </td> 
                    </tr>
                    <tr>
                        <td>onSort(vmodel)</td> <td>函数</td>  <td>排序后执行的回调 </td> 
                    </tr>
                    <tr>
                        <td>evenClass</td> <td>"even"</td>  <td>为表身的偶数行添加一个类名，以实现斑马线效果。 </td> 
                    </tr>
                    <tr>
                        <td>reRender(data,vmodel)</td> <td>函数</td>  <td>重新渲染数据 </td> 
                    </tr>
                    <tr>
                        <td>remoteSort(field, trend, vmodel, callback)</td> <td>函数</td>  <td>远程排序, 用户需要定义一个函数,框架会为它传入四个参数
                            field是要排序的值,trend为排序方向,vmodel为VM,callback是AJAX回调里需要执行的回调,要求传入一个数组

                            <pre  class="brush:javascript;gutter:false;toolbar:false">
                            remoteSort: function(field, trend, vmodel, callback){
                               $.ajax({
                                   url: url,
                                   data: {
                                        sortField: field,
                                        sortTrend: trend,
                                        xxx: xxxx
                                    },
                                    dataType: "json",
                                    callback: function(json){
                                        callback(data.gridData)
                                    }
                               })
                             }
                            </pre>

                        </td> 
                    </tr>
                    <tr>
                        <td>renderCell(val, key, row)</td> <td>函数</td>  <td>为每一个单元格渲染内容（★这是一个非常重要的方法） </td> 
                    </tr>
                    <tr>
                        <td>theadRenderedCallback(vmodel, options, vmodels)</td> <td>函数</td>  <td>表头渲染完毕执行的回调</td> 
                    </tr>
                    <tr>
                        <td>tbodyRenderedCallback(vmodel, options, vmodels)</td> <td>函数</td>  <td>表身渲染完毕执行的回调 </td> 
                    </tr>
                    <tr>
                        <td><b style="color:orangered">data</b></td> 
                        <td> [] </td>  
                        <td>是当前页的所有数据。
                            如果存在分页，默认是第一页。<br/>当我们点击分页栏的下一页或其他页时，就会ajax请求数据，
                            重写data。<br/>此属性在vm里是<b style="color:green">不可监控的</b>，
                            只是用来克隆其中一部分到_data。
                        </td> 
                    </tr>
                    <tr>
                        <td><b style="color:orangered">_data</b></td> 
                        <td> [] </td>  
                        <td>是当前页的显示出来的数据，
                            如果出现滚动条就是可视区那一部分的TR元素上附加的数据。<br/>
                            此属性在vm里是<b style="color:green">可监控的</b>，但不建议用户修改它，
                            应该交给框架自行处理。
                        </td> 
                    </tr>
                </table>
            </fieldset>
            <ul class="example-links">
                <li><a href="avalon.simplegrid.ex1.html">最简单的例子,只有columns与data</a></li>
                <li><a href="avalon.simplegrid.ex2.html">演示tbodyTemplate的使用</a></li>
                <li><a href="avalon.simplegrid.ex3.html">演示className, renderCell, align, columnsOrder的使用</a></li>
                <li><a href="avalon.simplegrid.ex4.html">指定百分比列宽</a></li>
                <li><a href="avalon.simplegrid.ex5.html">表头拖动改变列宽</a></li>
                <li><a href="avalon.simplegrid.ex6.html">演示无限拖</a></li>
                <li><a href="avalon.simplegrid.ex7.html">演示无限拖与分页栏</a></li>
                <li><a href="avalon.simplegrid.ex8.html">右边添加一个全选非全选的checkbox栏</a></li>
                <li><a href="avalon.simplegrid.ex9.html">演示斑马线效果</a></li>
                <li><a href="avalon.simplegrid.ex10.html">演示十字线效果</a></li>
                <li><a href="avalon.simplegrid.ex11.html">演示tbodyTemplate的使用</a></li>
                <li><a href="avalon.simplegrid.ex12.html">演示theadRenderedCallback的使用(数据汇总)</a></li>
                <li><a href="avalon.simplegrid.ex13.html">演示环比同比表格</a></li>
                <li><a href="avalon.simplegrid.ex14.html">切换卡(非组件)里面套着表格</a></li>
                <li><a href="avalon.simplegrid.ex15.html">表格套textbox组件</a></li>
                <li><a href="avalon.simplegrid.ex16.html">当数据为零时显示没有结果的情况</a></li>
            </ul>
        </div>
    </body>
</html>
